/* header区域 */
.header {
    width: 100%;
    height: 40px;
    background-color: #32373e;
    /* 内部元素行高继承 */
    line-height: 40px;
}
.header-c {
    /* 高度等于header高度 */
    height: 40px;
}
/* 左浮动 */
.header-c .header-left {
    float: left;
}
/* 左侧logo 左浮动、宽度（高度自动撑开）、上右外边距 */
.header-c .header-left .logo {
    float: left;
    width: 43px;
    margin-top: 9px;
    margin-right: 34px;
}
/* logo下面a标签 转块 宽高 背景 隐藏文字 */
.header-c .header-left .logo a {
    display: block;
    width: 43px;
    height: 21px;
    background: url(../images/logo.png) no-repeat;
    text-indent: -99em;
    overflow: hidden;
}
/* 城市切换模块 左浮动 宽度 右边距 鼠标移上手型 */
.header-c .header-left .city {
    float: left;
    width: 111px;
    margin-right: 33px;
    cursor: pointer;
}
/* 当前城市 文字颜色 右边距 */
.header-c .header-left .city span {
    color: #0dca9f;
    margin-right: 12px;
}
/* 切换城市 字号 文字颜色 */
.header-c .header-left .city i {
    font-size: 12px;
    color: #afb5c0;
}
/* 鼠标移上变色 */
.header-c .header-left .city:hover i {
    color: #fff;
}

/* 左侧导航栏 向左浮动 */
.header-c .header-left .nav {
    float: left;
}
/* 导航栏内部标签也向左浮动 */
.header-c .header-left .nav li {
    float: left;
}
/* 标签下面的a元素设置相对定位、转块、左右内边距撑开、默认文字颜色 */
.header-c .header-left .nav li a {
    position: relative;
    display: block;
    padding: 0 21px;
    color: #afb5c0;
}
/* a标签鼠标移入改变颜色 */
.header-c .header-left .nav li a:hover {
    color: #fff;
}
/* li.current交集选择器，选择即是类名current的li元素，下面的a标签特殊样式 */
.header-c .header-left .nav li.current a {
    background: #24282c;
    color: #fff;
}
/* new小标签，绝对定位，宽高、背景色、居中、圆角矩形 */
.header-c .header-left .nav li a .tips {
    position: absolute;
    right: -2px;
    top: 3px;
    height: 18px;
    width: 29px;
    border-radius: 8px 9px;
    background: #ff7452;
    color: #FFF;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}




/* 右浮动 */
.header-c .header-right {
    float: right;
}
/* 所有a标签左浮动，相对定位、文字颜色 */
.header-c .header-right a {
    position: relative;
    display: block;
    float: left;
    color: #afb5c0;
}
/* a标签鼠标选中颜色 */
.header-c .header-right a:hover {
    color: #fff;
}
/* 设置右外边距，撑开距离 */
.header-c .header-right .updown {
    margin-right: 23px;
}
.header-c .header-right .position {
    margin-right: 66px;
}
/* 登录前面小图标，绝对定位、宽高，背景定位 */
.header-c .header-right .login i {
    position: absolute;
    top: 11px;
    left: -26px;
    width: 18px;
    height: 18px;
    background: url(../images/sprite_01.png) no-repeat;
    background-position: -76px -136px;
}
/* 鼠标移到登录修改小图标 */
.header-c .header-right .login:hover i {
    background-position: -76px -174px;
}
/* 登录和注册中间分割线 */
.header-c .header-right span {
    float: left;
    color: #5e5a50;
    margin: 0 8px;
}
/* 注册右边距 */
.header-c .header-right .register {
    margin-right: 51px;
}
/* app右边距和默认颜色 */
.header-c .header-right .app {
    margin-right: 20px;
    color: #1ac295;
}
/* app鼠标划过变色 */
.header-c .header-right .app:hover {
    color: #81deaf;
}
/* app前面小图标绝对定位、尺寸、背景定位 */
.header-c .header-right .app i {
    position: absolute;
    top: 11px;
    left: -20px;
    width: 12px;
    height: 17px;
    background: url(../images/sprite_01.png) no-repeat;
    background-position: -64px -212px;
}
/* 小图标鼠标划过变色 */
.header-c .header-right .app:hover i {
    background-position: -96px -212px;
}